<template>
  <div class="container">
    <a-table :bordered="{cell:true}" :pagination="false" stripe :data="state.configObj.list">
      <template #columns>
        <a-table-column title="key" data-index="itemkey" width="300"></a-table-column>
        <a-table-column title="value" data-index="itemvalue"></a-table-column>
        <a-table-column title="操作" width="220">
          <template #cell="{ record }">
            <a-space>
              <a-button type="primary" size="small" @click="editConfig(record.id)"><template #icon><icon-edit /></template>修改</a-button>
            </a-space>
          </template>
        </a-table-column>
      </template>
    </a-table>
    <a-pagination class="mt10" show-total :total="state.configObj.total" @change="loadConfig" @page-size-change="loadConfig" v-model:current="state.sd.pageNum" v-model:page-size="state.sd.pageSize"></a-pagination>

    <a-modal :title="state.popupTitle" v-model:visible="state.entityDetailVisible" :footer="false">
      <ConfigDetail v-if="state.entityDetailVisible" v-model="state.entityDetailVisible" :entityId="state.popupEntityId"></ConfigDetail>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import axios from "axios";
import { Message } from '@arco-design/web-vue'
import mittBus from "@/utils/route-listener"
import {reactive, ref, onMounted, onUnmounted, defineAsyncComponent} from "vue";
// 引入组件
const ConfigDetail = defineAsyncComponent(() => import('@/views/sys/config/configDetail.vue'));
const state = reactive({
  sd: {
    pageNum: 1,
    pageSize: 10
  },
  configObj: {},

  entityDetailVisible : false,
  popupTitle : '',
  popupEntityId : 0,
})

const loadConfig = ()=>{
  axios.post('/sys/myconfig/page', state.sd).then(res => {
    const { data } = res
    state.configObj = data
  })
}
const editConfig = (id)=>{
  state.popupEntityId = id;
  state.popupTitle= "修改配置"
  state.entityDetailVisible= true
}
onMounted(()=>{
  loadConfig();
  mittBus.on("configedit", ()=>{
    loadConfig();
  })
})
onUnmounted(()=>{
  mittBus.off("configedit",()=>{})
})
</script>

<style scoped>

</style>
